<template>
  <div>
    <div class="p-3 bg-white border-bottom">
      <text class="title">服务</text>
    </div>

    <div class="flex-row bg-white"
         v-for="(grid, index) in grids"
         :key="index">
      <div class="flex p-3 text-center"
           v-for="(g, key) in grid"
           :key="key"
           @click="goPage(`serve.${g.url}`)">
        <image class="icon-img mb-1"
               :src="g.icon"></image>
        <text>{{g.title}}</text>
      </div>
    </div>

    <text class="p-3 text-center text-muted"
          @click="goPage('user.help.feedback')">更多服务</text>
  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import {
  STORAGE_FARM,
  STORAGE_CREDIT_RELATED
} from '../../plugins/constant'

export default {
  components: { VmButton },
  props: {},
  data() {
    return {
      farm: {},
      related: {},
      grids: [
        [
          { title: '查行情', url: 'market', icon: 'bmlocal://assets/credit/credit_icon_01.png' },
          { title: '看水电', url: 'power', icon: 'bmlocal://assets/credit/credit_icon_08.png' },
          { title: '比生产', url: 'produce.farm', icon: 'bmlocal://assets/credit/credit_icon_06.png' },
        ],
        [
          { title: '交禽险', url: 'insurance', icon: 'bmlocal://assets/credit/credit_icon_02.png' },
          { title: '翻政策', url: 'policy', icon: 'bmlocal://assets/credit/credit_icon_03.png' },
          { title: '学标准', url: 'standard', icon: 'bmlocal://assets/credit/credit_icon_05.png' },
        ]
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getFarmInfo()
  },
  methods: {
    getFarmInfo() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getProvider()
      }
    },
    async getProvider() {
      const res = await this.$http({
        method: 'GET',
        name: 'auth.org.provider',
        data: {
          start: 1,
          size: 1,
          orgClass: 'org_credit',
          addressCode: '520600000000'
        }
      })
      if (res && res.data && res.data.length) {
        this.getCreditRelated(res.data[0].orgId)
      }
    },
    async getCreditRelated(orgId) {
      const res = await this.$api.getData({
        server: 'credit',
        table: 'customer_related_view',
        params: {
          index: 1,
          size: 1,
          'service_id.eq': orgId,
          'customer_id.eq': this.farm.id
        }
      })
      if (res && res.length) {
        this.related = res[0]
        this.$storage.setSync(STORAGE_CREDIT_RELATED, this.related)
      }
    },
    goPage(name) {
      this.$nav.open({ name })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.text-muted {
  color: #999;
}
.text-gray {
  color: #666;
}
.bg-white {
  background-color: #fff;
}
.small {
  font-size: 26px;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-3 {
  margin-bottom: 30;
}
.p-3 {
  padding: 30px;
}
.p-2 {
  padding: 20px;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.icon-img {
  width: 100px;
  height: 100px;
}
.text-center {
  text-align: center;
  align-items: center;
}
.border-bottom {
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}
.title {
  font-size: 32px;
}
</style>
